<template>
  <view class="shopPage">
    <view class="topBox con">
      <view class="navbarBox">
        <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
        <u-input placeholder="搜索内容" prefix-icon="search" prefix-icon-style="color:#8dd9d4;font-size:24px"> </u-input>
        <image @click="goPage('/pages/message/message')" src="../../static/home/msg.png" class="icon" mode="aspectFill" />
      </view>
      <u-swiper :list="list2" height="160"></u-swiper>
    </view>
    <view class="tabsCon">
      <view class="tabsBox">
        <view class="itemBox" v-for="(item, index) in list1">
          <view @click="tabActive1 = item.name" :class="{ default: true, active: tabActive1 == item.name }">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="spBox" v-if="tabActive === '1'">
      <view style="width: 48%" v-for="(item, index) in 3" :key="index">
        <FwItem />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import { reactive, ref } from "vue";
import FwItem from "./components/FwItem.vue";
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];

// 创建响应式数据
const list1 = reactive([{ name: "推荐" }, { name: "品牌好物" }, { name: "休闲食品" }, { name: "服饰鞋包" }, { name: "日用百货" }]);
const tabActive = ref("1");
const tabActive1 = ref("推荐");
</script>
<style lang="less" scoped>
.shopPage {
  width: 100%;
  .topBox {
    margin-bottom: 20rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
  }
}

.tabsCon {
  padding: 32rpx;
  background-color: #fff;
  margin-top: 24rpx;
}
.spBox {
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
